<template>
    <div class="base-page"  :style="{ height:screenHeight-20+'px'}">
        <!-- 列表 -->
        <div style="height:100%"  class="right" v-show="viewList === true">
            <div class="e-table">
                <div class="top right-div1">
                    <div class="left">
                        <div class="left-btn">
                            <el-button type="primary" size="mini"
                                @click="addData"
                                class="btn-greenYellow"
                            >新增</el-button>
                        </div>
                    </div>
                    <div class="search_box">
                        <el-input class="ipt" type="text"
                            placeholder="输入搜索关键字"
                            v-model="searchKey"
                            @select="onSearch"
                            @change="onSearch"
                        ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
                        <div class="adverse">
                            <el-button type="primary" size="small" @click="onAdvanceSearch">高级搜索</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="e-table" >
                <el-table
                    :height="rightTableHeight"
                    :data="tableData"
                    border
                    :cell-class-name="cellClsNm"
                    @cell-mouse-enter="cellMouseEnter"
                    @cell-mouse-leave="cellMouseLeave"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                    class="table"
                    ref="tableRef"
                    v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'tableRef' }"
                >
                    <el-table-column label="序号" type="index" fixed width="55"> </el-table-column>
                    <el-table-column prop="equipmentNo" label="设备编号" min-width="200" show-overflow-tooltip
                        class-name="blue-column"
                    >
                        <template slot-scope="{ row }">
                            <span @click="tableDbEdit(row)">{{ row.equipmentNo || '无'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="equipmentName" label="设备名称" width="200" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="specificationModel" label="规格型号" width="200" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="timeUnit" label="计时单位" width="200" show-overflow-tooltip>
                        <template slot-scope="{ row }">
                            <span>{{ getTimeUnitList(row.timeUnit) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="quantity" label="数量" width="200" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="workShiftCount" label="转换台班数" width="200" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="state" label="状态" width="200" show-overflow-tooltip>
                        <template slot-scope="{ row }">
                            <span>{{ getState(row.state) }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <Pagination
                :total="paginationInfo.total"
                :pageSize.sync="paginationInfo.pageSize"
                :currentPage.sync="paginationInfo.currentPage"
                @currentChange="getTableData"
                @sizeChange="getTableData"
            />
        </div>
        <!-- 新增编辑界面 -->
        <div class="right" v-if="viewList === 'add' || viewList === 'edit'">
            <div class="e-form" style="padding: 0 10px 10px;">
                <div class="tabs-title">基本信息</div>
                <el-form ref="form" :model="formDataDetail" :rules="rules" label-width="150px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="设备编号：" prop="equipmentNo">
                              <el-input v-model="formDataDetail.equipmentNo" readonly>
                                  <i slot="suffix" class="el-input__icon el-icon-document-copy" @click="changeEquip(formDataDetail.accountId)"></i>
                              </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="设备名称：" prop="equipmentName">
                                <span>{{ formDataDetail.equipmentName }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="规格型号：" prop="specificationModel">
                                <span>{{ formDataDetail.specificationModel }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="计时单位：">
                                <el-select
                                    v-model="formDataDetail.timeUnit"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="(
                                            item, index
                                        ) in timeUnitList"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="数量：" prop="quantity">
                              <el-input v-model.number="formDataDetail.quantity"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="转换台班数：" prop="workShiftCount">
                                <el-input v-model.number="formDataDetail.workShiftCount"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="设备状态：">
                                <el-select
                                    v-model="formDataDetail.state"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in stateList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="footer">
                <div class="right-btn">
                    <el-button type="primary"
                        @click="onSave"
                    >保存</el-button>
                    <el-button type="default"
                        @click="onCancel"
                    >取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import Pagination from '@/components/pagination/pagination'
import { debounce, advanceSearch, showLoading, hideLoading } from '@/utils/common'
import { mapState, mapMutations } from 'vuex'
import { ShiftConversionList, addShiftConversion, updataShiftConversion } from '@/api/base/equip'
import { isNum } from '@/utils/rules'
import { selectDataClient } from '@/utils/common'
export default {
    components: {
        Pagination,
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
            timeUnitList: state => state.equip.equipData.timeUnitList//计时单位
        }),

        // 列表宽度
        rightTableWidth () {
            return (this.screenWidth - 300) + 'px'
        },
        // 列表高度
        rightTableHeight () {
            if (this.paginationInfo.total > 0) {
                return this.screenHeight - 170
            } else {
                return this.screenHeight - 118
            }
        },
        // 分配用户、分配岗位列表宽度
        rightTableWidth2 () {
            return (this.screenWidth - 300) + 'px'
        },
        rightTableHeight2 () {
            return this.screenHeight - 210
        }
    },
    data () {
        return {
            viewList: true, // 显示列表还是编辑界面: true 显示列表 false 显示编辑界面
            searchKey: '',
            currentRow: null,
            paginationInfo: {
                total: 0,
                pageSize: 20,
                currentPage: 1,
            },
            tableData: [],
            formData: {
                'equipmentName': '',
                'equipmentNo': '',
                'keyword': '',
                'limit': 0,
                'orgId': '',
                'page': 0,
                'specificationModel': '',
                'state': 1,
                'states': []
            },
            formDataDetail: {},
            MouseEnterId: 0,
            screenWidth: 0,
            screenHeight: 0,
            rules: {
                quantity: [
                    { required: true, message: '请输入数量', trigger: 'blur' },
                    { validator: isNum, trigger: 'blur' },
                ],
                workShiftCount: [
                    { required: true, message: '请输入转换台班数', trigger: 'blur' },
                    { validator: isNum, trigger: 'blur' },
                ],
                equipmentNo: [
                    { required: true, message: '请选择设备编号', trigger: 'blur' },
                ],
            },
            stateList: [
                {
                    label: '停用',
                    value: 1
                },
                {
                    label: '启用',
                    value: 2
                },
            ], //设备状态
        }
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
        this.getDicValue()
        this.getTableData()
    },
    methods: {
        ...mapMutations(['setSelectedInfo']),
        //获取当前使用的字典
        getDicValue () {
            this.$store.dispatch('equip/setTimeUnitList')//更新计时单位
        },
        async getTableData () {
            showLoading()
            try {
                this.formData.limit = this.paginationInfo.pageSize
                this.formData.page = this.paginationInfo.currentPage
                const resData = await ShiftConversionList(this.formData)
                this.tableData = resData.list
                this.paginationInfo.total = resData.totalCount
                hideLoading()
            } catch (error) {
                hideLoading()
            }
        },
        onSelectOrg (val) {
            this.paginationInfo.currentPage = 1
            this.formData = {
                ...this.formData,
                ...val,
            }
            this.getTableData()
        },
        addData () {
            this.formDataDetail = {
                'equipmentId': '',
                'equipmentName': '',
                'equipmentNo': '',
                'gmtCreate': '',
                'gmtModified': '',
                'quantity': 0,
                'specificationModel': '',
                'accountId': '',
                'standingBookType': '',
                'state': 2,
                'timeUnit': this.timeUnitList[0].value,
                'workShiftCount': 0,
                'workShiftId': ''
            }
            this.viewList = 'add'

        },
        tableDbEdit (row) {
            this.formDataDetail = this._.clone(row)
            this.viewList = 'edit'
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.quataId
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        onSearch (e) {
            console.log('e', e)
            let searchKey = e
            if (typeof e === 'object') {
                searchKey = this.searchKey
            }
            this.paginationInfo.currentPage = 1
            this.formData.keyword = searchKey
            this.getTableData()
        },
        onAdvanceSearch () {
            advanceSearch().then(res => {
                alert(JSON.stringify(res))
            })
        },
        goList () {
            this.viewList = true
        },
        handleCurrentChange (val) {
            console.log('handleCurrentChange: ', val)
            this.currentRow = val
        },
        onCancel () {
            this.viewList = true
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
        goCategoryManage () {
            this.$router.push('/categoryManage')
        },
        onSave () {
            this.$refs.form.validate(valid=>{
                if(valid) {
                    if(this.viewList === 'add') {
                        addShiftConversion(this.formDataDetail).then(() => {
                            this.clientPop('suc', '保存成功', () => { this.paginationInfo.currentPage = 1;this.getTableData();this.viewList = true })
                        })
                    }else if(this.viewList === 'edit') {
                        updataShiftConversion(this.formDataDetail).then(() => {
                            this.clientPop('suc', '保存成功', () => { this.paginationInfo.currentPage = 1;this.getTableData();this.viewList = true })
                        })
                    }
                }
            })

        },
        changeEquip (val) {
            console.log(val)
            const that = this
            // 弹窗选择数据
            selectDataClient({
                SelectServiceToken: '/facilityplan/list/account/equipment', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [val], // 已选中id
                Title: '选择自有与租赁台账' // 标题
            }).then(val => {
                that.formDataDetail.equipmentNo = val[0].equipmentNo
                that.formDataDetail.accountId = val[0].accountId
                that.formDataDetail.equipmentName = val[0].equipmentName
                that.formDataDetail.specificationModel = val[0].specificationModel ? val[0].specificationModel : ''
            }).catch(err=>{
                alert(err)
            })
        },
        getTimeUnitList (val) {
            const findObj = this.timeUnitList.find(x=>x.value === val)
            if (findObj) {
                return findObj.label
            } else {
                return ''
            }
        },
        getState (val) {
            const findObj = this.stateList.find(x=>x.value === val)
            if (findObj) {
                return findObj.label
            } else {
                return ''
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.blue-column span{
    display: block;
}
</style>
